<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
	
</div>
<script>
	/**
	 * 有时候我们需要从 store 中的 state 
	 * 中派生出一些状态，例如对列表进行过滤并计数：
	 *	computed: {
	 *	  doneTodosCount () {
	 *	    return this.$store.state.todos.filter(todo => 
	 *	    todo.done).length
	 *	  }
	 *	}
	 *	如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取
	 *	到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
	 */
	/**
	 * 如果有多个组件需要用到此属性，我们要么复制这个函数，
	 * 或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理
	 * 想。Vuex 允许我们在 store 中定义“getter”（可以认为是 store
	 *  的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖
	 *  被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
	 *  Getter 接受 state 作为其第一个参数：
	 */
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false },
      { id: 3, text: '...', done: true },
      { id: 4, text: '...', done: false },
      { id: 5, text: '...', done: true },
      { id: 6, text: '...', done: false },
      { id: 7, text: '...', done: true },
      { id: 8, text: '...', done: false },
      { id: 9, text: '...', done: false },
      { id: 10, text: '...', done: true },
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
});
const List = {
	//在模板才能这样写this.$store.state.todos,
	data : function(){
		return {
			todos : store.state.todos,//
		}
	},
	template : `
		<ul>
			<li v-for='(item,index) in todos' v-bind:style='{background:index % 2 === 0 ? "#f40" : "gray"}'>
				<p>
					<strong>{{item.id}} </strong>
					<span v-bind:style='{color:index % 2===0 ? "red" : "blue"}'> {{item.done}}</span>
				</p>
			</li>
		</ul>
	`,
	// computed : {
	// 	count(){
	// 		return this.$store.state.todos;
		
	// }}
}
const vm = new Vue({
	el : '#app',
	store,
	components : {List},
	template : `<div><list></list></div>`
})
</script>	
</body>
</html>